<template>
    <div style="min-width:829px">
        <div v-if="$route.path == '/noticeList'">
            <div class="vs-search-box">
                <el-form ref="form" v-search-box-enter :inline="true" :model="paging" label-width="110px">
                    <el-form-item>
                        <el-input style="width:200px" placeholder="请输入通告标题" v-model="paging.title" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <!-- <div class="operation-box clear-float">
                    <el-button @click="utils.goUrl('/noticeInfo?type=2')" type="primary">新增</el-button>
                </div> -->
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table"
                    style="width: 100%" border>
                    <el-table-column prop="id" label="序号" align="center" width="100"></el-table-column>
                    <el-table-column prop="title" label="通告标题" align="center"></el-table-column>
                    <el-table-column prop="update_time" label="更新时间" align="center"></el-table-column>
                    <el-table-column prop="is_see" label="状态" align="center">
                        <template slot-scope="scope">
                            <span :style="scope.row.is_see == 0 ? 'color:red' : ''">{{
                                scope.row.is_see |
                                    is_seeFilter
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" width="160" label="操作" align="center">
                        <template slot-scope="scope">
                            <!-- <span @click="setRow(3,scope.row)" class="tab-table-text">编辑</span> -->
                            <span @click="setRow(1, scope.row)" class="tab-table-text">详情</span>
                            <!-- <span @click="setRow(3,scope.row)" class="tab-table-text">删除</span> -->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="paging.page" :page-sizes="[100, 200, 500, 1000]" :page-size="paging.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="paging.total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            paging: {
                title: '',//姓名
                page: 1,
                total: 0,
                limit: 100,
            },
            tableData: [],
        };
    },
    created() {
        if (this.$route.path == '/noticeList') {
            this.handleCurrentChange(1);
        }
    },
    filters: {
        is_seeFilter(val) {
            let arr = ['未读', '已读']
            return arr[val]
        },
    },
    methods: {
        async setRow(type, row) {
            if (type == 1) {
                let { code } = await this.$Http.setAnnounceStore({ id: row.id });
                if (code) {
                    this.$forceUpdate()
                    this.utils.goUrl(`/noticeInfo?type=${type}&id=${row.id}`)
                }
            }
        },
        async repairGetList() {
            this.loading = true;
            let { code, data } = await this.$Http.getAnnounce(this.paging);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        reset() {//重置
            this.paging = this.$options.data().paging;
            this.handleCurrentChange(1)
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList()
        }
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}
</style>